<template>
    <div class="video-page">
        <Row type="flex" justify="center" align="middle" class="video-page-row">
            <Col class="video-top">
                <video :src="video" controls="controls" class="video"></video>
            </Col>
            <Col>
                <Button type="primary" to="/login">进入系统</Button>
            </Col>
        </Row>

    </div>
</template>

<script>
// import videoUrl from '@/assets/video/1.mp4'

export default {
  data () {
    return {
      video: ''
    }
  }
}
</script>

<style scoped lang="less">
    .video-page {
        width: 100%;
        height: 100%;
        /*background-image: url('https://skv4.oss-cn-hangzhou.aliyuncs.com/google/login-bg.jpeg');*/
        background-size: cover;
        background-position: center;
        position: relative;

        &-con {
            position: absolute;
            right: 160px;
            top: 50%;
            transform: translateY(-60%);
            width: 300px;

            &-header {
                font-size: 16px;
                font-weight: 300;
                text-align: center;
                padding: 30px 0;
            }

            .form-con {
                padding: 10px 0 0;
            }

            .login-tip {
                font-size: 10px;
                text-align: center;
                color: #c3c3c3;
            }
        }

        &-reg-form {
            overflow: scroll;
            height: 600px;
            width: 400px;
            top: 60%;
        }

        &-row {
            flex-direction: column;
        }
    }

    .m-b-0 {
        margin-bottom: 0;
    }

    .video-top {
        .video {
            height: 400px;
        }
    }
</style>
